<template>
  <el-dialog v-model="dialogVisible" title="创建知识库模板" width="600" :before-close="onClose">
    <el-form ref="formRef" label-position="top" label-width="auto" :model="formLabelAlign" style="max-width: 600px"
      :rules="rules">
      <el-form-item label="模板名称" prop="realName">
        <el-input v-model="formLabelAlign.realName" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="简介" prop="remark">
        <el-input type="textarea" v-model="formLabelAlign.remark" placeholder="请输入简介" />
      </el-form-item>
      <el-form-item label="封面" prop="cover">
        <el-upload v-model:file-list="fileList" class="upload-demo" action="#" :limit="1" :auto-upload="false"
          :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange" list-type="picture"
          accept="image/*">
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div>
          <el-button @click="onClose"> 取消 </el-button>
          <el-button type="primary" @click="handleConfirm"> 创建 </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup>
import type { UploadUserFile, UploadProps, UploadFile } from 'element-plus'
import { checkOss, uploadOrdinary } from '@/api/system/oss';
import { joinEnterpriseTemplate } from '@/api/enterpriseDoc/enterpriseTemplateApi';


const dialogVisible = ref(false)
const formLabelAlign = reactive({
  realName: '',
  remark: ''
})
const formRef = ref()
const rules = reactive({
  realName: [
    { required: true, message: '请输入名称', trigger: 'blur' },
  ],
  remark: [{ required: true, message: '请输入简介', trigger: 'blur' }],
})
const fileList = ref<UploadUserFile[]>([])
const fileUrl = ref('')
const dataRow = ref([])

const openDialog = (data: any) => {
  dialogVisible.value = true
  data.map((item: { id: number; }) => {
    dataRow.value.push(item.id)
  })
  fileList.value = []
}
const onClose = () => {
  dialogVisible.value = false
  formRef.value.resetFields()
}
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
const handlePreview: UploadProps['onPreview'] = (fileList) => {
  fileList = fileList
}
const handleChange: UploadProps['onChange'] = (fileList) => {
  uploadImg(fileList)
}
// const checkOssFile = async () => {
//   const res = await checkOss({
//     fileName: fileList.value[0].name,
//     fileSize: fileList.value[0].size,
//     fileSuffix: fileList.value[0].name.split('.').pop() || '',
//     type: "publicImages"
//   })
//   console.log(res)
// }
const uploadImg = async (fileList: UploadFile) => {
  let formData = new FormData()
  formData.append('file', fileList.raw);
  formData.append('type', 'publicImages');
  formData.append('fileName', fileList.name.split('.')[0]);
  let obJson = {
    module: 'template',
  }
  formData.append('info', JSON.stringify(obJson));
  let res = await uploadOrdinary(formData)
  if (res.code == 200) {
    fileUrl.value = res.data.storageIdConvert
    // fileUrl.value = info.storageIdConvert.toString();
  }
}

const createTemplate = async () => {
  const res = await joinEnterpriseTemplate({
    realName: formLabelAlign.realName,
    remark: formLabelAlign.remark,
    url: fileUrl.value,
    enterpriseIds: dataRow.value.join(','),
  })
  if (res.code == 200) {
    ElMessage.success('创建成功')
    dialogVisible.value = false
    formRef.value.resetFields()
  }
}

const handleConfirm = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      createTemplate()
      // checkOssFile()
      // uploadImg()
      console.log('success submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}


defineExpose({
  openDialog
})


</script>